'use strict';

import React from 'react';
import { Link,browserHistory  } from 'react-router';
import { connect } from 'react-redux';
import * as actions from '../../actions/models';
import {Tab,Tag,Menu,Notice,Button,Icon,Dialog,Pagination} from 'qnui';
import { Row, Col } from 'qnui/lib/grid';
import Overlay from 'qnui/lib/overlay';
import SystemDialog from 'components/system-dialog/index';

const Popup = Overlay.Popup;
const SplitButton = Button.Split;

class Models extends React.Component {
    constructor(props) {
        super(props);
		this.dispatch = this.props.dispatch;   
		this.state = {
			model_id:0,
			tags:{
				tag_color:[],
				tag_time_nodes:[],
				tag_action:[],
				tag_price:[]
			}
		}
		
		this.dispatch(
			actions.getShopModels({
				page:1,
				page_size:this.props.models.shopPageSize
			})
		);
    }
  handleSetTag(tag_type,tag){
	const tags = this.state.tags;
	const tag_arr = tags[tag_type];
	const index = tag_arr.indexOf(tag);
	if(index>=0){
		tag_arr.splice(index,1); 
	}else{
		tag_arr.push(tag);
	}
	tags[tag_type]=tag_arr;
	this.setState({tags});
	
    this.dispatch(
		actions.getModels({
			page:1,
			page_size:this.props.models.pageSize,
			tags,
			version:window.info.version
		})
	);
  }
  handleLoadMoreModels(){
	  this.dispatch(
			actions.getModels({
				page:1,
				page_size:this.props.models.pageSize,
				tags:this.state.tags,
				version:window.info.version
			})
		);
  }
  handlePageChange(page){
	  this.dispatch(
			actions.getModels({
				page:page,
				page_size:this.props.models.pageSize,
				tags:this.state.tags,
				version:window.info.version
			})
		);
  }
  handleShopPageChange(page){
	  this.dispatch(
			actions.getShopModels({
				page:page,
				page_size:this.props.models.shopPageSize
			})
		);
  }
  moreModelsDialogClose(){
	  this.dispatch(
		actions.showModelsDialog(false)
	  );
  }
  buyDialogClose(){
	  this.dispatch(
		actions.buyDialogClose(false)
	  );
  }
  handleBuyModel(model_id){
	  this.dispatch(
			actions.buyModel({
				model_id
			})
	  );
	  this.setState({model_id});
  }
  handleCreatePage(shop_model_id){
	  this.dispatch(
			actions.createPage({shop_model_id})
	  );
  }
  closeSystemDialog(){
	  this.dispatch(
			actions.closeSystemDialog()
	  );
  }
  handleCheckPay(){
	  this.dispatch(
			actions.checkBuyModel({model_id:this.state.model_id,oid:this.props.models.oid})
	  );
  }
  componentWillReceiveProps(nextProps){
	  if(nextProps.models.page_id>0){
		  window.location.href=window.dnd+"?page_id="+nextProps.models.page_id
		  return;
	  }
	  if(nextProps.models.buyModelCount>this.props.models.buyModelCount){
			this.dispatch(
				actions.getShopModels({
					page:this.props.models.shopCurPage,
					page_size:this.props.models.pageSize
				})
			);
	  }
  }
  menuClick(){
	  Dialog.alert({content:"您当前的版本是："+window.info.ver_str+"，高版本可获得更多模板优惠！"});
  }
  render() {
	const models = (this.props.models.models);
	const shopModels = (this.props.models.shopModels);
	const trigger = <Button type="secondary" 
							shape="text" 
							size="small" 
							style={{marginTop:"5px",marginLeft:"5px"}}>
							更多节日
							<Icon type="arrow-down" />
					</Button>
    return <div>
			<SystemDialog 
				loginError={this.props.models.loginError}	
				creating={this.props.models.creating}
				message={this.props.models.message}
				error={this.props.models.error}
				onClose={this.closeSystemDialog.bind(this)}
				/>
			<Dialog visible={this.props.models.buyDialog}
                    onOk={this.buyDialogClose.bind(this)}
                    onCancel={this.buyDialogClose.bind(this)}
                    onClose={this.buyDialogClose.bind(this)} 
					title="请打开订购链接购买，完成后点击“已付款”按钮"
					footer={false}
					>
					<Row justify="center">
						<Button onClick={this.handleCheckPay.bind(this)}>已付款</Button>
						<a href={this.props.models.buyUrl} target="_blank" style={{marginLeft:"20px"}}>
							<Button type="primary" shape="warning">立即订购</Button>
						</a>
					</Row>
			</Dialog>
			<Dialog visible={this.props.models.moreModelsDialog}
                    onOk={this.moreModelsDialogClose.bind(this)}
                    onCancel={this.moreModelsDialogClose.bind(this)}
                    onClose={this.moreModelsDialogClose.bind(this)} 
					title="选择模板并开通"
					footer={false}
					shouldUpdatePosition={true}
					ref="dialog"
					>
				<Row justify="start">
					<Tag shape="readonly" type="secondary" size="small" style={{border:"none"}}>节日：</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","double_11")} size="small">双11</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","spring_festival")} size="small">春节·年货节</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","mid_autumn_day")} size="small">中秋节</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","valentines_day")} size="small">情人节</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","national_day")} size="small">10·1国庆</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","drinks_festival")} size="small">9·9酒水节</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","66_festival")} size="small">淘宝66大促</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","618_festival")} size="small">天猫618理想生活节</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","labor_day")} size="small">5·1大促</Tag>
					<Popup 
						trigger={trigger} 
						triggerType="click"
						offset={[-704,0]}
						cache={true}
						shouldUpdatePosition={true}
						>
						<div style={{backgroundColor:"#FFFFFF",marginTop:"7px",width:"820px"}}>
							<Tag shape="selectable"  onChange={this.handleSetTag.bind(this,"tag_time_nodes","women_day")} size="small">3·8女人节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","newyear_day")} size="small">元旦</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","lantern_festival")} size="small">元宵节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","qixi_day")} size="small">七夕节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","april_fools_day")} size="small">愚人节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","qingming_festival")} size="small">清明节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","double_fifth_day")} size="small">端午节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","double_ninth_day")} size="small">重阳节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","winter_solstice")} size="small">冬至</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","mothers_day")} size="small">母亲节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","fathers_day")} size="small">父亲节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","childrens_day")} size="small">儿童节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","teachers_day")} size="small">教师节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","kissing_day")} size="small">7·6接吻日</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","easter_day")} size="small">复活节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","halloween")} size="small">万圣节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","thanksgiving_day")} size="small">感恩节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","christmas_day")} size="small">圣诞节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","bestie_day")} size="small">3·1-3·7闺蜜节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","gastronomes_day")} size="small">517吃货节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","cars_day")} size="small">518-618购车节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","babys_day")} size="small">518母婴节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","aegyo_day")} size="small">81日-816撒娇节</Tag>
							<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_time_nodes","anniversary_day")} size="small">店庆</Tag>
						</div>
					</Popup>
				</Row>
				<Row justify="start">
					<Tag shape="readonly" type="secondary" size="small" style={{border:"none"}}>营销：</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_action","countdown_prom")} size="small">倒计时折扣</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_action","countdown_prom_code")} size="small">营销码</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_action","limit_prom")} size="small">限时促销</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_action","lottery")} size="small">抽奖</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_action","gift")}  size="small">赠品</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_action","coupon")} size="small">优惠券</Tag>
				</Row>
				<Row justify="start">
					<Tag shape="readonly" type="secondary" size="small" style={{border:"none"}}>色调：</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","red")}  size="small">红色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","orange")}  size="small">橙色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","blue")} size="small">蓝色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","gray")} size="small">灰色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","black")} size="small">黑色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","purple")} size="small">紫色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","blue")} size="small">绿色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","white")} size="small">白色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","brown")} size="small">棕色</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_color","yellow")} size="small">黄色</Tag>
					<Tag shape="readonly" type="secondary" size="small" style={{border:"none"}}>价格：</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_price",0)} size="small">免费</Tag>
					<Tag shape="selectable" onChange={this.handleSetTag.bind(this,"tag_price",10)} size="small">10元以内</Tag>
				</Row>
                <Row type="wrap" style={{width:"940px"}}>
				{
					models.map((model,key)=>{
						const menu = (
							<Menu onClick={this.menuClick.bind(this)}>
								<Menu.Item>创业型￥{model.price_v1}元</Menu.Item>
								<Menu.Item key="abc">发展型￥{model.price_v2}元</Menu.Item>
								<Menu.Item key="1">专属型￥{model.price_v3}元</Menu.Item>
							</Menu>
						);
						let showPrice = "";
						switch(window.info.version){
							case "FW_GOODS-1840332-1":
								showPrice="创业型￥"+model.price_v1+"元";
							break;
							case "FW_GOODS-1840332-v2":
								showPrice="发展型￥"+model.price_v2+"元";
							break;
							case "FW_GOODS-1840332-v3":
							case "FW_GOODS-1840332-v4":
								showPrice="专属型￥"+model.price_v3+"元";
							break;
						}
						let is_buy = (model.shop_model_id>0)?<Icon type="success" size="xs" style={{color:"green"}} />:"";
						return (
							<Col key={key} fixedSpan="9" className="active">
								<Row type="wrap" className="active-type info">
									<Row>
									<img src={model.preview} />
									</Row>
									<Row justify="center">
									{model.name}{is_buy}
									</Row>
								</Row>
								<Row type="wrap" className="active-type button">
									<Row type="wrap" justify="center" >
										<img src={model.qrcode} style={{width:"120px",height:"120px"}} />
									扫码预览
									</Row>
									<Row justify="center" >
									<SplitButton menu={menu} type="normal" size="small" shape="text" >{showPrice}</SplitButton>
									</Row>
									<Row justify="center" style={{color:"#999999",fontSize:"12px"}} >
										{model.info}
									</Row>
									<Row justify="center">
										<Button type="normal" shape="warning" onClick={this.handleBuyModel.bind(this,model.id)}>
										开通模板
										</Button> 
									</Row>
								</Row>
							</Col>	
						
						);
					})
				}
				</Row>
				<Row justify="center" style={{marginTop:"10px"}}>
					<Pagination onChange={this.handlePageChange.bind(this)} defaultCurrent={this.props.models.curPage} pageSize={this.props.models.pageSize} total={this.props.models.totalModels} size="small" />
				</Row>
            </Dialog>
		<Row type="wrap">
            <Col fixedSpan="9">
				<Row type="wrap" onClick={this.handleLoadMoreModels.bind(this)} style={{border:" 1px solid #e9e9e9",borderRadius:"6px",height:"260px",cursor:"pointer",marginTop:"10px"}}>
					<Row justify="center" align="center" style={{height:"200px"}}>
						<Icon type="add" size="xxl" style={{color:"#666666"}} />
					</Row>
						<Row justify="center">
						获取更多模板
						</Row>
				</Row>
			</Col>
			{
				shopModels.map((shopModel,key)=>{
					return(
						<Col key={key} fixedSpan="9" className="active">
							<Row type="wrap" className="active-type info">
								<Row>
								<img src={shopModel.preview} />
								</Row>
								<Row justify="center">
								{shopModel.name}
								</Row>
							</Row>
							<Row className="active-type button" justify="center" align="center" >
								<Button onClick={this.handleCreatePage.bind(this,shopModel.shop_model_id)} type="primary" size="large">
								创建活动
								</Button>
							</Row>
						</Col>
					)
				})
			}
        </Row>
		
		<Row justify="center" style={{marginTop:"10px"}}>
			<Pagination onChange={this.handleShopPageChange.bind(this)} defaultCurrent={this.props.models.shopCurPage} pageSize={this.props.models.shopPageSize} total={this.props.models.shopTotalModels} size="small" />
		</Row>
    </div>;
  }
}

export default connect((state)=> {
  return {
    models: state.models
  };
})(Models);
